<template>
	<view class="p-top30">
		<Sharer :pageData="share_member_info"></Sharer>

		<view class="intro" v-if="times_card_info">
			<titleBox title="服务卡详情"></titleBox>
			<view class="row a-center m-top20">
				<image :src="$imgUrls(times_card_info.logo)" mode="aspectFill" class="Logo"></image>
				<view class="intro_box">
					<text class="ellipsis black size32 bold">{{ times_card_info.name }}</text>
					<text class="ellipsis color_99 h6 m-top8">{{ times_card_info.desc }}</text>
					<text class="ellipsis color_cc h6 m-top8">{{ item_use.expire_time }}</text>
				</view>
				<!-- <view class="actuality">

					<view class="lineBox">
						<u-line-progress :percentage="all_times" :showText="false" :height="4"
							activeColor="#ff0000"></u-line-progress>
					</view>
					<text class="residue">剩余 {{ item_use.last_times }} 次</text>
				</view> -->
			</view>
		</view>


		<view class="content">
			<titleBox title="服务内容"></titleBox>
			<view class="Shopine">
				<view class="Box">
					<image :src="$imgUrls(goods.img)" mode="aspectFill" class="ShopImg"></image>
				</view>
				<view class="WenBox">
					<view class="d-flex f-column">
						<text class="black size30 ellipsis">{{goods.name}}</text>
						<text class="color_99 size26 ellipsis m-top8">{{goods.info}}</text>
					</view>
					<text class="price">￥{{goods.price}}</text>
				</view>

			</view>
		</view>

		<Richtext :pageData="times_card_info.content"></Richtext>

		<view class="footer" @click="Nowbtn" v-if="item_use.state == 0">立即核销</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import Sharer from '@/subCard/components/Sharer.vue'
	import titleBox from '@/subCard/components/titleBox.vue'
	import Richtext from '@/subCard/components/Richtext.vue'
	export default {
		components: {
			Sharer,
			titleBox,
			Richtext
		},
		data() {
			return {
				goods: '',
				item_use: '',
				times_card_info: '',
				share_member_info: '',
			}
		},
		onLoad(opt) {
			if (opt.id) this.id = opt.id;
			this.getTimeItemDetail();
		},
		methods: {
			getTimeItemDetail() {
				this.$http.get({
					url: '/TimeCardApi/getTimeItemDetail',
					data: {
						id: this.id
					}
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg);
					const result = res.data;
					this.goods = result.goods;
					this.item_use = result.item_use_log_find;
					this.times_card_info = result.times_card_info;
					this.share_member_info = result.share_member_info;
				})
			},

			async Nowbtn() {
				const Flag = await this.$model('提示', '是否确定核销？');
				if (!Flag) return;
				this.$showLoading('');
				this.$http.post({
					url: '/TimeCardApi/useCardItem',
					data: {
						shop_id: this.shopId,
						use_code: this.item_use.use_code,
						uid: this.uid,
					}
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg);
					this.$Toast('核销成功');
					this.getTimeItemDetail();
				})

			}
		},
		computed: {
			...mapState(['uid', 'vid', 'uid', 'shopId']),
			all_times() {
				const Use = Number(this.item_use.full_times) - Number(this.item_use.last_times);
				const result = Math.round((Use / Number(this.item_use.full_times)) * 100)

				return result
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f2f2;
		padding-bottom: 80rpx;
	}
</style>
<style lang="scss" scoped>
	.footer {
		width: 300rpx;
		height: 80rpx;
		background-color: #169bd5;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 28rpx;
		border-radius: 10rpx;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 100;
	}

	.content {
		width: 690rpx;
		margin: 24rpx auto 0;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 24rpx 24rpx 30rpx 24rpx;
		display: flex;
		flex-direction: column;

		.Shopine {
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			margin-top: 20rpx;

			.Box {
				width: 180rpx;
				height: 180rpx;
				border: 1px solid #f9f9f9;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 22rpx;

				.ShopImg {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}

			.WenBox {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.price {
					color: #990000;
					font-size: 32rpx;
				}
			}
		}
	}

	.intro {
		width: 690rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin: 24rpx auto 0;

		overflow: hidden;
		padding: 24rpx;

		&_box {
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		.actuality {
			display: flex;
			flex-direction: column;
			align-items: center;

			.Use {
				width: 160rpx;
				height: 60rpx;
				border-radius: 10rpx;
				background-color: var(--color);
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ffffff;
				font-size: 26rpx;
			}

			.lineBox {
				width: 170rpx;
				margin-top: 10rpx;
			}

			.residue {
				margin-top: 10rpx;
				color: #999;
			}
		}
	}

	.Logo {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
</style>